<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>OPPO官网</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="static/css/index.css" /></link>
<link href="static/css/Userstyle.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/carts.css">
<link rel="stylesheet" href="static/css/reset.css">
<script src="static/js/jquery.min.js"></script>
<script src="static/js/UserStyle.js"></script>

<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=yes">
</head>
	<style>
		#nonelist li{
		}
		#nonelist{
			position: absolute; 
			width: 100px;
			height: 80px;
			top: 0px;
			right: 40px; 
			z-index: 4;
			display: block;
			border-radius: 10px;
			background-color: white;
		}
		#nonelist li a{
			font-size: 8px;
			text-decoration: none;
			color: #45494C;
		}
		#nonelist li a:hover{
			color: green;
		}
		#getSet{
	font-size:20px;
	padding:20px;
	border-bottom:1px solid green;
}
	</style>
<body>
	<div id="index">
		<div id="log">
			<a href="index.jsp"><img src="static/img/oppo.png"></img></a>
		</div>
		<div class="bann">
			<ul>
				<li class="yin"><a class="zi" id="zx" href="##">手机</a></li>
				<li><a class="zi" href="##">品牌</a></li>
				<li><a class="zi" href="##">商场</a></li>
				<li><a class="zi" href="##">体验店</a></li>
				<li><a class="zi" href="##">服务</a></li>
				<li><a class="zi" href="##">社区</a></li>
				<li><a class="zi" href="##">ColorOs</a></li>
				<li><a class="zi" href="##">云服务</a></li>
			</ul>
		</div>
		<div class="buttonCollection">
			<div class="qutton" id="qutton_upload">
				<div class="qutton_dialog" id="uploadDialog">
					<ul>
						<li><a href="CartItem.jsp" class="zi"><img src="static/img/购物车.png"></img>购物车</a>
						</li>
						<li><a href="##" class="zi"><img src="static/img/订单.png">我的订单</a>
						</li>
						<li><a href="##" class="zi"><img src="static/img/回收单.png">回收单</a>
						</li>
						<li><a href="##" class="zi"><img
								src="static/img/个人中心.png">个人中心</a></li>
						<li><a href="login.html" class="zi"><img src="static/img/登陆.png">登陆</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>
	<div id="xian">
		<div class="x1">
			<img src="static//img/R17.png">
		</div>
		<div class="x2">
			<img src="static/img/R17pro.png"> <img
				src="static/img/findx.jpg"> <img src="static/img/R15.png">
			<img src="static/img/A7X.png">
		</div>
		<div class="x3">
			<img src="static/img/A1.png"> <img src="static/img/A3.png">
			<img src="static/img/A5.png"> <img src="static/img/R11S.png">
		</div>
	</div>
	<div id="out-1">
		<div id="gou">
		<div id="getSet">
		<p class="">OPPO账号:<%=request.getSession().getAttribute("user_id")%></p>
		<p>用户名：<a id="User">11</a></p>
		<p id="pp">欢迎您的登陆</p>
		</div>
			<div class="Safety">
          <dl>
           <dt>
            <strong>登录密码：</strong>
            <span>保障账户安全，建议您定期更换密码</span>
            
            <em>修改</em>
           </dt>
           <dd>
           <form id="form1">
            <table width="100%" class="safForm">             
             <tr>  
              <td width="35%" align="right">设置新密码：</td>
              <td><input type="text" class="safinput1" id="pass1" name="pass1"></td>
             </tr>
             <tr>
              <td width="35%" align="right">确认新密码：</td>
              <td><input type="text" class="safinput1"  id="pass2" name="pass2" ></td>
             </tr>
             <tr>
              <td width="35%" align="right">&nbsp;</td>
              <td><button type="button" class="safSub"  onclick="passwd()">修改登录密码</button></td>
             </tr>
            </table>
           </form>
           </dd>
           
           <dt>
            <strong>修改手机：</strong>
            <span>修改您绑定的手机号码</span>
            
            <em>修改</em>
           </dt>
           <dd>
           <form id="form1">
            <table width="100%" class="safForm">
             <tr>
              <td width="35%" align="right">原手机号：</td>
              <td><%=request.getSession().getAttribute("user_id")%></td>
             </tr>
             <tr>
              <td width="35%" align="right">新手机号：</td>
              <td><input type="text" id="phone1" class="safinput1" name="phone"></td>
             </tr>
             <tr>
              <td width="35%" align="right">确认新手机号：</td>
              <td><input type="text" id="phone2" class="safinput1" ></td>
             </tr>
             <tr>
              <td width="35%" align="right">&nbsp;</td>
              <td><button type="button" class="safSub" onclick="phone()" >修改绑定手机</button></td>
             </tr>
            </table>
           </form>
           </dd>
           
          
           
           <dt>
            <strong>头像上传：</strong>
            <span>只有好看的头像，才能让自己变的更帅</span>
            <em>修改</em>
           </dt>
           <dd>
           <form enctype="multipart/form-data"  id="pc">
            <table width="100%" class="safForm">         
             <tr>
              <td width="35%" align="right">上传头像</td>
              <td><input type="file" name="_f" id="pc1" name="photo"> </td>
             </tr>
             <tr>
              <td width="35%" align="right">&nbsp;</td>
              <td>
               <img src="####" width="180" height="88" />
              </td>
             </tr>           
             <tr>
              <td width="35%" align="right">&nbsp;</td>
              <td><button type="button" class="safSub" onclick="tu()">提交</button></td>
             </tr>
            </table>
           </form>
           </dd>
           
          <dt>
            <strong>新用户名：</strong>
            <span>改个帅气的用户名吧</span>
            
            <em>修改</em>
           </dt>
           <dd>
           <form id="username">
            <table width="100%" class="safForm">
             <tr>
              <td width="35%" align="right">新用户名：</td>
              <td><input type="text" class="safinput1" id="name1" name="name1"></td>
             </tr>
             <tr>
              <td width="35%" align="right">确认新用户名：</td>
              <td><input type="text" class="safinput1" id="name2"  name="name2"></td>
             </tr>
             <tr>
              <td width="35%" align="right">&nbsp;</td>
              <td><button type="button" class="safSub" onclick="names()" >修改用户名</button></td>
             </tr>
            </table>
           </form>
           </dd>
           
          </dl>
         </div><!--Safety/-->

		</div>
	</div>
	<div id="lian">
		<ul>
			<li id="t1">推荐机型
				<ul>
					<li>R17</li>
					<li>FIND X</li>
					<li>A7</li>
					<li>A7X</li>
					<li>A9</li>
					<li>A11</li>
				</ul>
			</li>
			<li id="t2">服务
				<ul>
					<li>以旧换新</li>
					<li>服务网点查询</li>
					<li>零配件查询</li>
					<li>官方授权网点</li>
					<li>预置软件公告</li>
				</ul>
			</li>
			<li id="t3">关于我们
				<ul>
					<li>关于OPPO</li>
					<li>新闻资讯</li>
					<li>媒体联络</li>
					<li>加入我们</li>
					<li>反馈安全问题</li>
				</ul>
			</li>
			<li id="t4">商务合作
				<ul>
					<li>开放平台</li>
					<li>材料合作</li>
				</ul>
			</li>
			
		</ul>
	</div>
	<div id="di">© 2005 - 2018 OPPO 版权所有 粤ICP备08130115号-1
		联系方式：4001-666-888</div>
	
	<script src="static/js/lib/velocity.js"></script>
	<script src="static/js/lib/velocity.ui.js" type="text/javascript"></script>
	<script src="static/js/lib/Quttons.js" type="text/javascript"></script>
	<script type="text/javascript" src="static/js/main.js"></script>
	<script type="text/javascript"></script>
	
	<script>
	$(document).ready(function() {
		var user_id=<%=request.getSession().getAttribute("user_id")%>;
		//alert("错误用户:" + user_id)
		if(user_id != "" && user_id != null){
			$.ajax({
				url:"FindImgControl",
                type:"post",
                data:{"user_id":user_id},
                dataType : "json",
                success:function(data){
                	var strHtml = "";
                	var strhh="";
    				$.each(data, function(index, eachVal) {
    					
    					strhh+=eachVal.user_name;
    					
    					strHtml+="<img src='";
    					strHtml+=eachVal.user_img;
    					strHtml+="' style='height: 40px; width: 40px; border-radius: 20px; margin-top:10px'/>";
    					strHtml+="<p style='position: absolute; margin-right: 100px; margin-top: 60px; font-size: 10px; z-index: 5;'>";
    					strHtml+=eachVal.user_name;
    					strHtml+="</p>";
    					strHtml+="<div id='nonelist'>";
	    					strHtml+="<ul style='list-style: none;'>";
		    					strHtml+="<li><a href='UserSe.jsp'>个人中心</a></li>";
		    					strHtml+="<li><a href='CartItem.jsp'>我的购物车</a></li>";
		    					strHtml+="<li><a href='#'>我的订单</a></li>";
		    					strHtml+="<li><a href='ExitControl'>注销</a></li>";
	    					strHtml+="</ul>"
    					strHtml+="</div>";
    				});
    				$(".buttonCollection").html(strHtml);
    				$("#User").html(strhh);
                }
			})
		}
		
		
	})
	function passwd(){
			if(document.getElementById("pass1").value==document.getElementById("pass2").value&&document.getElementById("pass1").value!=""&&document.getElementById("pass1").value!=null&&document.getElementById("pass2")!=""&&document.getElementById("pass2")!=null){
				$.ajax({
					url:"UserAction",
	                type:"post",
	                data:$('#form1').serialize(),
	                dataType : "json",
	                
	                success:function(data){
	                	if(data!=""&&data!=null){
	                		alert("修改成功");
	                	}
	                }	
				})					
				}else{
					alert("两次输入密码不一致或者为空，请重新输入");
				}
			};
	function names(){
		if(document.getElementById("name1").value==document.getElementById("name2").value&&document.getElementById("name1").value!=""&&document.getElementById("name1").value!=null&&document.getElementById("name2")!=""&&document.getElementById("name2")!=null){
			$.ajax({
				url:"UserNameAction",
                type:"post",
                data:$('#username').serialize(),
                dataType : "json",
                success:function(data){
                	if(data!=""&&data!=null){
                		alert("修改成功");
                	}
                }	
			})					
			}else{
				alert("两次输入用户名不一致或者为空，请重新输入");
			}
		
		}
	function tu(){
		if(pc1!=""&&pc1!=null){
			$.ajax({
				url:"UserPhotoAction",
                type:"post",
                data:$('#pc').serialize(),
                dataType : "json",
                success:function(data){
                	if(data!=""&&data!=null){
                		alert("修改成功");
                	}
                }	
			})					
			}else{
				alert("两次输入用户名不一致或者为空，请重新输入");
			}
		
		}
		</script>
		
	
</body>

</html>